The Properties Panel is one of the most important areas of the Figma Design workspace. It is the right sidebar used to inspect, edit, and control the properties of selected layers and objects. The controls displayed in the panel change according to the type of object selected, such as a frame, text layer, shape, image, component, or instance.
The Properties Panel provides precise controls for position, size, alignment, typography, fills, strokes, effects, corner radius, constraints, auto layout, component properties, prototype interactions, and export settings. The Design and Prototype tabs are available when the user has edit access to a Figma Design file, while view-only users can inspect properties and export content according to their access. :contentReference[oaicite:0]{index=0}
JustAcademy Figma Training | Register for Figma Course Demo
The Properties Panel is the right-side panel in Figma that displays the properties and controls associated with the currently selected object. It allows designers to make precise changes without manually manipulating every property on the canvas.
Figma Design File
│
├── Navigation Bar
├── Layers / Assets
├── Canvas
└── Properties Panel
│
├── Design
├── Prototype
└── Properties / Inspection
The exact controls shown depend on the selected layer and the user's access level. :contentReference[oaicite:1]{index=1}
The Properties Panel is located on the right side of the Figma Design interface. It works together with the Layers panel on the left and the canvas in the center.
┌────────────────┬──────────────────────────────┬─────────────────────┐
│ Layers Panel │ Canvas │ Properties Panel │
│ │ │ │
│ Header │ ┌──────────────┐ │ Position │
│ Hero │ │ │ │ Size │
│ Card │ │ Design │ │ Layout │
│ Footer │ │ │ │ Fill │
│ │ └──────────────┘ │ Stroke │
│ │ │ Effects │
└────────────────┴──────────────────────────────┴─────────────────────┘
Figma's current interface uses a navigation bar on the left, a canvas in the middle, and the properties panel on the right. :contentReference[oaicite:2]{index=2}
The Properties Panel allows designers to control designs accurately and consistently. Instead of depending only on visual dragging, designers can enter exact values for dimensions, spacing, typography, colors, and layout behavior.
The available capabilities depend on the user's access to the file. With edit access, users can modify design properties and create prototype flows and interactions. With view-only access, users can inspect layer properties and export content according to the available permissions.
| Access | Typical Capabilities |
|---|---|
| Edit | Edit design properties and create or modify prototype interactions |
| View | Inspect properties, view comments, inspect code output where available, and export |
Figma documents these access differences as part of the right-sidebar workflow. :contentReference[oaicite:3]{index=3}
The Design tab is used to view, add, remove, and modify properties of objects in the design.
When no object is selected, the Design tab can provide access to local styles and variables, canvas background settings, and page export options. When a layer is selected, the panel displays properties appropriate to that layer.
Design Tab
│
├── Position
├── Size
├── Alignment
├── Rotation
├── Layout
├── Constraints
├── Auto Layout
├── Typography
├── Fill
├── Stroke
├── Effects
├── Components
└── Export
Figma lists these as examples of controls available in the Design tab. :contentReference[oaicite:4]{index=4}
The Prototype tab is used to build interactive prototypes. Designers can connect frames and objects and define how users navigate through the experience.
Select Frame
↓
Open Prototype
↓
Create Flow
↓
Add Interaction
↓
Choose Trigger
↓
Choose Action
↓
Choose Animation
↓
Preview Prototype
Figma's current Properties Panel documentation describes flows, interactions, scroll behavior, and prototype settings in the Prototype tab. :contentReference[oaicite:5]{index=5}
The Properties Panel is contextual, meaning that it changes according to the selected layer.
| Selected Layer | Common Properties |
|---|---|
| Frame | Position, size, layout, fill, stroke, effects, auto layout |
| Text | Font, size, weight, line height, alignment, color |
| Shape | Position, size, fill, stroke, radius, effects |
| Image | Position, size, image fill, crop, effects |
| Component | Component properties, layout, appearance |
| Instance | Instance properties and supported component properties |
| Multiple Layers | Shared properties that can be edited together |
Position controls determine where an object is placed within its parent or design environment.
X: 120
Y: 240
Rotation: 0°
Using exact position values is useful when creating structured layouts and accurately aligning elements.
X and Y values describe the object's position relative to its relevant parent or coordinate system.
Parent Frame
┌──────────────────────────────┐
│ │
│ ┌──────────────┐ │
│ │ Button │ │
│ └──────────────┘ │
│ │
└──────────────────────────────┘
↑
X / Y Position
Precise coordinates can be useful for fixed layouts, illustrations, presentations, and controlled UI compositions.
Width and height determine the dimensions of an object.
Width: 320 px
Height: 180 px
These properties are frequently used for frames, cards, buttons, images, containers, and other interface elements.
Rotation changes the angle of an object around its transformation point.
0° → Normal
45° → Diagonal
90° → Rotated
180° → Upside Down
Rotation is useful for icons, arrows, illustrations, decorative elements, and visual compositions.
Alignment controls how selected objects are positioned relative to each other or their parent container.
Left Center Right
│ │ │
● ● ●
Corner radius controls the rounding of the corners of supported layers such as rectangles and frames.
| Radius | Typical Appearance |
|---|---|
| 0 px | Sharp corners |
| 4 px | Slightly rounded |
| 8–12 px | Common UI rounding |
| 16–24 px | Highly rounded UI |
| Large radius | Can create pill-like shapes depending on dimensions |
Designers may need different radius values for different corners. This is useful for cards, banners, dropdowns, and custom interface shapes.
Top Left: 16 px
Top Right: 16 px
Bottom Right: 0 px
Bottom Left: 0 px
The Fill property controls the visual surface of a layer. Depending on the object, a fill may use a solid color, gradient, image, or other supported fill type.
Fill
│
├── Solid
├── Linear Gradient
├── Radial Gradient
├── Angular Gradient
├── Diamond Gradient
└── Image
A solid fill applies one color to the selected layer.
Fill Color
#2563EB
Opacity: 100%
Solid fills are commonly used for buttons, backgrounds, cards, icons, labels, and interface surfaces.
Gradients blend two or more colors and can be used to create depth, emphasis, backgrounds, and visual effects.
Color A ───────────────→ Color B
███████████████████████████
Gradient
Images can be used as fills for supported objects. Image controls can be used to adjust how the image is displayed within the selected layer.
Opacity controls the transparency of a fill or layer.
100% → Fully visible
75% → Slightly transparent
50% → Semi-transparent
25% → Highly transparent
0% → Invisible
Opacity can be useful for overlays, disabled states, backgrounds, decorative elements, and visual effects.
Stroke creates an outline around a supported layer.
┌────────────────────────┐
│ │
│ Card Content │
│ │
└────────────────────────┘
↑
Stroke
Stroke weight determines the thickness of the border.
| Weight | Typical Use |
|---|---|
| 1 px | Subtle UI borders |
| 2 px | Standard visible borders |
| 3–4 px | Strong borders |
| Higher values | Illustrations and decorative designs |
The Effects section provides visual effects that can change how an object appears.
Card
│
├── Fill
├── Stroke
└── Effects
├── Drop Shadow
└── Background Blur
A drop shadow creates visual depth behind an object.
An inner shadow creates a shadow effect inside the boundaries of an object. It can be used for depth, pressed states, and decorative UI treatments.
┌────────────────────┐
│ ░ ░ │
│ Content │
│ ░ ░ │
└────────────────────┘
Layer blur applies a blur effect to the selected layer itself.
It can be useful for creating soft decorative objects, background elements, lighting effects, and visual compositions.
Background blur affects the content visible behind the selected layer. It is commonly used for glass-style interfaces, overlays, floating panels, and navigation surfaces.
Background Content
████████████████████
████████████████████
↓
Background Blur
↓
┌──────────────────┐
│ Floating Panel │
└──────────────────┘
When a text layer is selected, the Properties Panel provides controls for typography.
Font family determines the typeface used by the selected text.
Typography
│
├── Font Family: Inter
├── Weight: 600
├── Size: 24 px
├── Line Height: 32 px
└── Letter Spacing: 0%
Professional design systems normally define a controlled set of fonts to maintain consistency.
Font size determines the visual size of text.
| Text Type | Example Range |
|---|---|
| Caption | 12–14 px |
| Body | 14–18 px |
| Subheading | 20–28 px |
| Heading | 32–48 px |
| Hero Heading | 48 px and above depending on design |
Font weight determines the thickness of text characters.
Regular
Medium
Semi Bold
Bold
Extra Bold
Using a consistent set of weights helps establish hierarchy without creating unnecessary visual variation.
Line height controls the vertical distance between lines of text.
First line of text
↕
Line Height
↕
Second line of text
Correct line height improves readability, especially for paragraphs, headings, forms, and long content.
Letter spacing controls the distance between individual characters.
Normal:
DESIGN
Increased:
D E S I G N
Letter spacing can be useful for headings, labels, uppercase navigation, and branding.
Text alignment controls how text is positioned inside its text box.
Text resizing controls how a text layer's dimensions respond to its content.
| Mode | Purpose |
|---|---|
| Auto Width | Allows the text box to expand horizontally |
| Auto Height | Allows the text box to grow vertically with content |
| Fixed Size | Keeps the text box within defined dimensions |
Layout properties control the structure and behavior of objects inside their parent containers.
Auto layout allows frames and their contents to respond dynamically to changes. It automatically arranges objects according to direction, spacing, padding, alignment, and resizing behavior.
Auto Layout Frame
│
├── Direction
├── Spacing
├── Padding
├── Alignment
├── Resizing
└── Child Layers
Figma currently supports vertical, horizontal, and grid auto layout flows. :contentReference[oaicite:6]{index=6}
Auto layout can be applied to a frame or selection of layers. The shortcut is Shift + A.
Select Layers
↓
Shift + A
↓
Auto Layout Frame
↓
Configure Direction
↓
Configure Spacing
↓
Configure Padding
↓
Configure Resizing
Figma's documentation confirms that auto layout can be added from the right sidebar or by using Shift + A. :contentReference[oaicite:7]{index=7}
Direction determines how child objects flow inside an auto layout frame.
| Direction | Example |
|---|---|
| Vertical | Form fields, feed items, card content |
| Horizontal | Navigation, button rows, icon menus |
| Grid | Product grids and structured layouts |
Spacing determines the distance between child objects inside an auto layout frame.
Item A
↓
16px
↓
Item B
↓
16px
↓
Item C
Consistent spacing is important for design systems and responsive layouts.
Padding controls the space between the edge of the parent frame and its child layers.
┌──────────────────────────────┐
│ ← 24px → │
│ │
│ Button Label │
│ │
│ ← 24px → │
└──────────────────────────────┘
Padding can be adjusted to create consistent internal spacing.
Hug contents allows a layer or frame to size itself around its content where the layout supports it.
Text: "Buy Now"
↓
Hug Contents
↓
Button fits text automatically
For example, a button can grow when its label becomes longer. Figma documents Hug as one of the resizing behaviors available in auto layout. :contentReference[oaicite:8]{index=8}
Fill container allows a child layer in an auto layout structure to occupy available space in its parent.
Parent Frame
┌─────────────────────────────┐
│█████████████████████████████│
│ Fill Container │
└─────────────────────────────┘
This is useful for responsive inputs, cards, content sections, and flexible navigation elements. :contentReference[oaicite:9]{index=9}
Fixed sizing maintains a defined width or height until another design change affects it.
Width: Fixed 320 px
Height: Fixed 200 px
Fixed sizing is useful where a design requires controlled dimensions.
Constraints define how layers respond when their parent frame changes size.
For auto layout children, Figma generally uses resizing behavior instead of traditional constraints unless the object is configured to ignore the auto layout flow. :contentReference[oaicite:10]{index=10}
Layout guides provide visual structure for arranging content on a frame. They are useful for grids, columns, rows, and responsive website layouts.
Desktop Frame
│
├── Grid
├── Columns
├── Content Width
└── Alignment Guides
Blend modes control how a layer visually interacts with the layers beneath it.
Blend modes can be useful for image treatments, overlays, illustrations, and visual effects.
Component properties are configurable aspects of reusable components. They allow designers to expose controlled changes without requiring users to rebuild the component.
Figma describes component properties as changeable aspects of a component that allow designers to control what can be modified in instances. :contentReference[oaicite:11]{index=11}
A boolean property controls whether an element is shown or hidden.
Button Component
│
├── Icon
└── Label
Show Icon = True
→ Icon Visible
Show Icon = False
→ Icon Hidden
A text property allows the text content of a component instance to be changed.
Button Component
│
└── Label Property
Instance 1 → "Login"
Instance 2 → "Register"
Instance 3 → "Continue"
An instance swap property allows designers to replace a nested component instance with another suitable component.
Card Component
│
├── Image
├── Title
└── Icon
↓
Instance Swap
↓
Search / Favorite / Arrow Icon
Variant properties allow related component variations to be represented and selected as part of a component set.
Button
│
├── Type
│ ├── Primary
│ ├── Secondary
│ └── Danger
│
└── State
├── Default
├── Hover
├── Pressed
└── Disabled
When an instance is selected, the Properties Panel can expose the component properties configured by the main component.
Depending on the component configuration, designers may change text, visibility, variants, nested instances, and other supported properties.
Styles provide reusable design properties. They can help maintain consistency across colors, typography, effects, and layout-related resources.
Design System
│
├── Color Styles
├── Text Styles
├── Effect Styles
└── Layout Guide Styles
Figma also provides access to styles and variables from relevant areas of the design workflow. :contentReference[oaicite:12]{index=12}
Variables provide reusable values that can be applied to supported design properties. They can help create scalable design systems for colors, dimensions, strings, and other supported values.
Variable
↓
Property
↓
Component
↓
Screen
↓
Consistent Design System
In the current Figma interface, variables have their own entry in the navigation experience rather than being permanently located inside the Properties Panel. :contentReference[oaicite:13]{index=13}
The Export section allows designers to configure selected content for export.
Exporting can be useful for sharing assets, moving content to other tools, or saving design elements outside Figma. :contentReference[oaicite:14]{index=14}
Designers may configure export scales according to the intended use of the asset.
1x → Standard size
2x → Double resolution
3x → Triple resolution
The appropriate export scale depends on the target platform and asset requirements.
Multiple objects can be selected together, allowing shared properties to be changed where supported.
Select:
├── Button 1
├── Button 2
└── Button 3
Change Shared Property
↓
Apply to Selection
This is useful when making repeated adjustments across similar objects.
Figma provides workflows for copying properties from one layer and applying them to another. This can speed up repetitive formatting tasks.
Source Layer
↓
Copy Properties
↓
Target Layer
↓
Apply Properties
The Properties Panel also supports workflows for copying properties and copying or pasting content as supported code or image formats through layer actions. :contentReference[oaicite:15]{index=15}
Users with view access can inspect properties of layers. This is particularly useful for collaboration and developer handoff.
Figma's current documentation states that view-only users can inspect layer properties and export content from the right sidebar. :contentReference[oaicite:16]{index=16}
The Properties Panel is useful during developer handoff because it exposes important visual and structural information about the design.
Designer
↓
Create UI
↓
Configure Properties
↓
Create Components
↓
Apply Design System
↓
Share File
↓
Developer Inspects Properties
↓
Developer Implements UI
The Properties Panel provides controls that support responsive design, including auto layout, resizing, constraints, dimensions, alignment, and layout behavior.
Desktop Layout
↓
Auto Layout
↓
Resizing Rules
↓
Constraints / Responsive Behavior
↓
Tablet
↓
Mobile
Consider a button containing the text "Continue". Instead of manually resizing the button whenever the text changes, an auto layout frame can be configured to respond to its content.
Button
│
├── Direction: Horizontal
├── Padding: 16px / 24px
├── Gap: 8px
├── Alignment: Center
├── Width: Hug Contents
└── Text: Continue
If the label changes to "Continue to Checkout", the button can adapt to the new content based on its auto layout configuration. :contentReference[oaicite:17]{index=17}
Login Form
│
├── Email Input
│ ├── Label
│ └── Input
│
├── Password Input
│ ├── Label
│ └── Input
│
└── Login Button
The Properties Panel can be used to configure typography, spacing, colors, borders, radius, auto layout, and component properties for this form.
Product Card
│
├── Product Image
├── Product Name
├── Description
├── Price
├── Rating
└── Add to Cart Button
A vertical auto layout frame can manage the content while component properties can make the card reusable across multiple products.
Navigation Bar
│
├── Logo
├── Home
├── Products
├── Pricing
├── About
└── Login Button
A horizontal auto layout frame can control spacing and alignment between navigation elements.
Dashboard Card
│
├── Icon
├── Title
├── Value
├── Percentage
└── Supporting Text
The Properties Panel can be used to define the card's dimensions, fill, border, radius, shadow, typography, spacing, and responsive behavior.
Food Delivery App
│
├── Header
├── Search Bar
├── Category List
├── Restaurant Card
├── Food Card
├── Add to Cart Button
├── Cart
└── Checkout
Use the Properties Panel to maintain consistent typography, spacing, colors, card dimensions, corner radius, auto layout, and component behavior throughout the application.
Banking Dashboard
│
├── Sidebar
├── Header
├── Balance Card
├── Statistics Cards
├── Transaction Table
├── Analytics
└── Recent Activity
Use consistent Properties Panel settings for cards, buttons, navigation items, typography, spacing, and visual effects.
E-Commerce Website
│
├── Header
├── Search
├── Category Navigation
├── Product Grid
├── Product Details
├── Cart
├── Checkout
└── Footer
Reusable components combined with consistent property settings make it easier to maintain the same visual language across the entire website.
Select Layer
↓
Identify Layer Type
↓
Open Design Tab
↓
Set Position
↓
Set Dimensions
↓
Configure Layout
↓
Configure Typography
↓
Configure Fill
↓
Configure Stroke
↓
Configure Effects
↓
Configure Auto Layout
↓
Configure Constraints
↓
Configure Component Properties
↓
Configure Export
↓
Review Design
Select Frame
↓
Open Prototype Tab
↓
Set Flow Starting Point
↓
Select Object
↓
Create Interaction
↓
Select Trigger
↓
Select Action
↓
Configure Animation
↓
Configure Scroll Behavior
↓
Preview Prototype
| Layer Type | Important Properties |
|---|---|
| Text | Font, size, weight, line height, letter spacing, alignment, fill |
| Rectangle | Position, size, fill, stroke, radius, effects |
| Frame | Position, size, fill, stroke, radius, auto layout, constraints |
| Component | Layout, component properties, variants, fill, stroke, effects |
| Instance | Component properties, supported overrides, appearance |
| Image | Position, size, image fill, crop, effects |
The Properties Panel is closely connected to design-system workflows because designers can apply standardized colors, typography, spacing, effects, components, and layout rules.
Design System
│
├── Colors
├── Typography
├── Spacing
├── Components
├── Effects
└── Variables
↓
Properties Panel
↓
Apply to Layers
↓
Consistent UI
A well-designed component exposes only the properties that users need to customize. This creates reusable components that remain flexible without requiring designers to modify their internal structure.
Button Component
│
├── Type: Primary
├── State: Default
├── Label: Buy Now
├── Show Icon: True
└── Icon: Cart
Large applications often contain many screens that share common UI elements. Using reusable components, styles, variables, and consistent properties reduces repetitive design work.
Login
↓
Home
↓
Product
↓
Cart
↓
Checkout
↓
Shared Design System
↓
Consistent Properties
| Feature | Layers Panel | Properties Panel |
|---|---|---|
| Location | Left side | Right side |
| Main Purpose | Structure and organization | Inspect and edit properties |
| Shows | Layer hierarchy | Selected layer settings |
| Primary Action | Select and organize | Modify properties |
| Useful For | Navigation | Precise design control |
| Feature | Properties Panel | Assets Panel |
|---|---|---|
| Main Purpose | Edit selected object | Find reusable components |
| Location | Right side | Left navigation area |
| Typical Use | Change size, color, layout, typography | Search and insert components |
| Workflow | Select → Edit | Search → Insert |
| Action | Mac | Windows |
|---|---|---|
| File / Layers | Option + 1 | Alt + 1 |
| Assets | Option + 2 | Alt + 2 |
| Auto Layout | Shift + A | Shift + A |
| Frame | F | F |
| Text | T | T |
| Rectangle | R | R |
| Group | Command + G | Ctrl + G |
| Duplicate | Command + D | Ctrl + D |
| Create Component | Option + Command + K | Ctrl + Alt + K |
| Prototype | Shift + E | Shift + E |
The Properties Panel is the right sidebar used to inspect and modify properties of selected layers and objects.
It is located on the right side of the Figma Design interface.
No. The controls change according to the selected layer type and the user's access.
The Design tab is used to view and modify visual and structural properties of design objects.
The Prototype tab is used to create and manage prototype flows, interactions, animations, and scrolling behavior.
Font family, font size, font weight, line height, letter spacing, alignment, resizing, color, and other supported typography properties.
Auto Layout automatically arranges elements according to direction, spacing, padding, alignment, and resizing rules.
Hug Contents allows a supported auto layout layer to size itself around its content.
Fill Container allows a child layer to occupy available space inside its parent auto layout frame.
Constraints define how layers respond when their parent frame changes size.
Component properties are configurable aspects of reusable components, such as boolean, text, instance swap, and variant properties.
It helps developers inspect important design information such as dimensions, colors, typography, spacing, components, and export settings.
Open Figma File
↓
Select Layer
↓
Properties Panel Appears
↓
Identify Layer Type
↓
Set Position
↓
Set Dimensions
↓
Configure Layout
↓
Configure Typography
↓
Configure Fill
↓
Configure Stroke
↓
Configure Effects
↓
Configure Auto Layout
↓
Configure Resizing / Constraints
↓
Configure Component Properties
↓
Create Prototype Interactions
↓
Configure Export
↓
Review Design
↓
Developer Handoff
Plan Project
↓
Create Pages
↓
Create Frames
↓
Create Layers
↓
Organize Layers
↓
Create Components
↓
Use Assets
↓
Configure Properties
↓
Apply Styles / Variables
↓
Apply Auto Layout
↓
Configure Responsive Behavior
↓
Create Prototype
↓
Test Design
↓
Prepare Assets
↓
Developer Handoff
The Properties Panel is a core part of professional Figma workflows. It provides precise control over the visual, structural, responsive, component, prototype, and export properties of selected design elements.
Understanding the Properties Panel helps designers move from manually arranging objects to creating structured, reusable, responsive, and scalable interfaces. When combined with the Layers Panel, Assets Panel, Components, Auto Layout, Styles, Variables, Constraints, and Prototyping features, it becomes an essential tool for modern UI/UX design.
For structured Figma learning and practical UI/UX training, visit JustAcademy Figma Training and register for the Figma Course Demo.
